<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>各行变色</title>
		<style>
			table{
				border-collapse: collapse;
				border: none;
				margin: 120px auto;
			}
			tr{
				background-color: #2787c4;
			}
			td{
				width: 120px;
				height: 35px;
				border: solid #c5c5c5 1px;
				text-align: center;
			}
			.odd{
				background-color: #c1c1c1;
			}
			.even{
				background-color: #929292;
			}
			.in{
				background-color: #ffffff;
			}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<td>序号</td><td>姓名</td><td>课程</td><td>成绩</td>
			</tr>
			<tr>
				<td>1</td><td>吕不韦</td><td>语文</td><td>100</td>
			</tr>
			<tr>
				<td>2</td><td>吕布</td><td>日语</td><td>100</td>
			</tr>
			<tr>
				<td>3</td><td>吕蒙</td><td>营销学</td><td>100</td>
			</tr>
			<tr>
				<td>4</td><td>吕尚</td><td>数学</td><td>100</td>
			</tr>
			<tr>
				<td>5</td><td>吕雉</td><td>英语</td><td>100</td>
			</tr>
			<tr>
				<td>6</td><td>吕超</td><td>体育</td><td>100</td>
			</tr>
		</table>
		<script>
			var tr = document.getElementsByTagName("tr");
			for(var i = 1; i < tr.length; i++){
				if(i % 2 == 1){
					tr[i].className = "odd";
					tr[i].onmouseout = function(){
						this.className = "odd";
					}
				}else{
					tr[i].className = "even";
					tr[i].onmouseout = function(){
						this.className = "even";
					}
				}
				tr[i].onmouseover = function(){
					this.className = "in";
				}
			}
		</script>
	</body>
</html>
